<template>
	<view class="main">
		<navbar :title="$t('delivery.deliverytitle')" :background="$utypeprimary" :titleColor="$utitlecolor" :backColor="$utitlecolor">
		 </navbar>
		 <view class="goods">
		 	<image  :src="info.cover_image"
		 	style="margin:40rpx 30rpx 0rpx 60rpx ;width:250rpx; height:190rpx"  ></image>
			<view class="detail">
				<view class="name u-line-2">
					{{info.goodsname}}
				</view>
				<view class="count">
					<view class="money">
						{{ $currency }}{{info.price}}
					</view>
					<view class="number">
						x1
					</view>
				</view>
			</view>
		 </view>
		 <view class="white2">
		 	<view class="the">
		 		<image :src="info.status==0 ? src1 : src2" mode=""
				style="width: 28rpx;height: 28rpx;"></image>
				<view class="address">
					{{$t("delivery.address")}}
				</view>
		 	</view>
			<view class="time">
				{{info.createtime}}
			</view>
			<view class="commodity ">
				<image :src="info.status==1 ? src1 : src2" mode=""
				style="width: 28rpx;height: 28rpx;"></image>
				<view class="com">
					{{$t("delivery.com")}}
				</view>
			</view>
			<view class="distribution">
				{{$t('delivery.desc1')}}
			</view>
			<view class="of ">
				<image :src="info.status==2 ? src1 : src2" mode=""
				style="width: 28rpx;height: 28rpx;"></image>
				<view class="good">
					{{$t("delivery.goods")}}
				</view>
			</view>
			<view class="days">
				{{$t('delivery.desc2')}}
			</view>
			<view class="last ">
				<image :src="info.status==3 ? src1 : src2" mode=""
				style="width: 28rpx;height: 28rpx;"></image>
				<view class="confirm">
					{{$t("delivery.confirm")}}
				</view>
			</view>
		 </view>
		 <view class="white3">
		 	<view class="box1">
		 		<view class="order">
		 			{{$t("delivery.time")}}
		 		</view>
				<view class="order-time">
					{{info.ordertime}}
				</view>
		 	</view>
			<view class="box2">
				<view class="no">
					{{$t("delivery.no")}}
				</view>
				<view class="order-no">
					{{info.order_id}}
				</view>
			</view>
			<view class="box3">
				<view class="information">
					{{$t("delivery.information")}}
				</view>
				<view class="order-information">
					<u-image width="31rpx" height="37rpx" src="../../static/adress.png"
							style="margin:0 19rpx 0 39rpx ;"></u-image>
					<view class="order-name">
						{{address.name}}
					</view>
					<view class="order-number">
						{{address.mobile}}
					</view>
				</view>
				<view style="padding: 0 90rpx;font-size:30rpx;word-break:break-all;margin-top:30rpx;">
					{{address.province}},{{address.city}},{{address.county}},{{address.village}},{{address.address}}
				</view>
				<view class="receipt" @click="onConfirmClick">
					{{$t("delivery.receipt")}}
				</view>
			</view>
		 </view>
	</view>
</template>

<script>
	import {
		shippingdetails,
		confirmReceipt
	} from '@/api/warehouse.js'
	export default {
		data() {
			return {
				src1:"../../static/delivery/green.png",
				src2:"../../static/delivery/hui.png",
				process:true,
				wid: '',
				info: {}
			};
		},
		onLoad(option) {
			this.wid = option.wid;
			this.load();
		},
		computed: {
			address() {
				return this.info.address || {}
			}
		},
		methods: {
			async load() {
				let result = await shippingdetails({
					wid: this.wid
				})
				this.info = result;
			},
			async onConfirmClick() {
				uni.showLoading({
				});
				let result = await confirmReceipt({
					id: this.info.id
				})
				uni.hideLoading();
				this.load();
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F6F6F6;
	}
	.main {
		padding-bottom: 188rpx;
	}
	
	.goods{
		background-color: #FFFFFFFF;
		height:270rpx;
		display: flex;
		.detail{
			width: 348rpx;
			.name{
				font-size: 30rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #0F0F0E;
				margin: 66rpx 0rpx 30rpx 0;
			}
			.count{
				display: flex;
				justify-content: space-between;
				.money{
					font-size: 36rpx;
					font-family: Alibaba PuHuiTi;//rubick;
					font-weight: 400;
					color: #FC3E32;
				}
				.number{
					font-size: 30rpx;
					font-family: Rubik;
					font-weight: 400;
					color: #AAAAAA;
				}
			}
		}
		
	}
	.white2{
		height: 649rpx;
		margin-top: 20rpx;
		background-color: #FFFFFFFF;
		overflow: hidden;
		.the{
			display: flex;
			margin-top: 50rpx;
			margin-left: 40rpx;
			.address{
				margin-top: -8rpx;
				margin-left: 36rpx;
				font-size: 32rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #000000;
			}
		}
		.time{
			font-size: 30rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #878D9C;
			border-left: 2rpx solid #DCDFE5;
			margin: 10rpx 0 10rpx 51rpx;
			height: 108rpx;
			padding-top: 17rpx;
			padding-left: 49rpx;
		}
		.commodity{
			display: flex;
			margin-left: 40rpx;
			.com{
				margin-top: -8rpx;
				margin-left: 36rpx;
				font-size: 32rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #000000;
			}
		}
		.distribution{
			font-size: 30rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #878D9C;
			border-left: 2rpx solid #DCDFE5;
			margin: 10rpx 0 10rpx 51rpx;
			height: 108rpx;
			padding-top: 17rpx;
			padding-left: 52rpx;
			padding-right: 40rpx;
		}
		.commodity{
			display: flex;
			margin-left: 40rpx;
			.com{
				margin-top: -8rpx;
				margin-left: 36rpx;
				font-size: 32rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #000000;
			}
		}
		.distribution{
			font-size: 30rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #878D9C;
			border-left: 2rpx solid #DCDFE5;
			margin: 10rpx 0 10rpx 51rpx;
			height: 108rpx;
			padding-top: 17rpx;
			padding-left: 52rpx;
			padding-right: 40rpx;
		}
		.of{
			display: flex;
			margin-left: 40rpx;
			.good{
				margin-top: -8rpx;
				margin-left: 36rpx;
				font-size: 32rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #000000;
			}
		}
		.days{
			font-size: 30rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #878D9C;
			border-left: 2rpx solid #DCDFE5;
			margin: 10rpx 0 10rpx 51rpx;
			height: 108rpx;
			padding-top: 17rpx;
			padding-left: 52rpx;
			padding-right: 40rpx;
		}
		
		.last{
			display: flex;
			margin-left: 40rpx;
			.confirm{
				margin-top: -8rpx;
				margin-left: 36rpx;
				font-size: 32rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #000000;
			}
		}
	}
	
	.white3{
		margin-top: 20rpx;
		padding-bottom: 36rpx;
		overflow: hidden;
		background-color: #FFFFFFFF;
		padding-top: 10rpx;
		.box1{
			padding: 40rpx 40rpx 0rpx 40rpx;
			.order{
				font-size: 32rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #878D9C;
			}
			.order-time{
				margin-top: 34rpx;
				padding-bottom: 40rpx;
				font-size: 32rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #0F0F0E;
				border-bottom: 2rpx solid #ECECEC;
			}
		}
		.box2{
			padding: 40rpx 40rpx 0rpx 40rpx;
			.no{
				font-size: 32rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #878D9C;
			}
			.order-no{
				margin-top: 34rpx;
				padding-bottom: 40rpx;
				font-size: 32rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #0F0F0E;
				border-bottom: 2rpx solid #ECECEC;
			}
		}
		
		.box3{
			padding: 40rpx 40rpx 0rpx 40rpx;
			.information{
				font-size: 32rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #878D9C;
			}
			.order-information{
				display: flex;
				align-items: center;
				font-size: 32rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #0F0F0E;
				.order-name{
					margin-top: 34rpx;
					padding-bottom: 28rpx;
				}
				.order-number{
					padding-bottom: 28rpx;
					margin-left: 41rpx;
					margin-top: 34rpx;
				}
			}
			
			.room{
				font-size: 32rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #0F0F0E;
				border-bottom: 2rpx solid #ECECEC;
				padding-bottom: 37rpx;
			}
			.receipt{
				position: fixed;
				bottom: 60rpx;
				width: 670rpx;
				height: 90rpx;
				background-color: #0F0F0E;
				border-radius: 10rpx;
				text-align: center;
				line-height: 90rpx;
				font-size: 30rpx;
				font-family: Rubik;
				font-weight: 400;
				color: $u-type-primary;
				margin-top: 100rpx;
			}
		}
	}
</style>
